<template>
  <div>
    <div class="homecontent">
      <!-- 搜索 -->
      <Search></Search>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img :src="item.url" style="width: 100%" />
        </van-swipe-item>
      </van-swipe>
      <!-- 宫格 -->
      <grid :channel="channel" />
      <!-- 品牌制造商 -->
      <my-list :brandList="brandList" />
      <!-- 新品首发 -->
      <pro-home :newGoodsList="newGoodsList" title="周一周四·新品首发" />
      <!-- 人气推荐 -->
      <hot-good :hotGoodsList="hotGoodsList" />
      <!-- 专题精选 -->
      <special-topic :topicList="topicList" />
      <!-- 分类 -->
      <div v-for="item in categoryList" :key="item.id"> 
         <pro-home :newGoodsList="item.goodsList" :title="item.name" />
      </div>
    </div>
      <BackTop/>
  </div>
</template>

<script>
import Grid from "./Home/Grid.vue";
import MyList from "./Home/MyList";
import ProHome from "./Home/ProHome";
import BackTop from "./Home/BackTop";
import HotGood from "./Home/HotGood";
import SpecialTopic from "./Home/SpecialTopic";
import Search from '../pages/Search'

import axios from "axios";
export default {
  components: { Grid, MyList, ProHome, HotGood, SpecialTopic,Search,BackTop},
  name: "home",
  data() {
    return {
      searchval: "",
      // 轮播图数组
      banner: [
        {
          id: "1",
          url: require(`../assets/轮播1.jpg`),
        },
        {
          id: "2",
          url: require(`../assets/轮播2.jpg`),
        },
        {
          id: "3",
          url: require(`../assets/轮播3.jpg`),
        },
        {
          id: "4",
          url: require(`../assets/轮播4.jpg`),
        },
      ],
      // 宫格
      channel: [],
      // 品牌制造商
      brandList: [],
      // 新品首发
      newGoodsList: [],
      // 人气推荐
      hotGoodsList: [],
      // 专题精选
      topicList: [],
      // 分类数组
      categoryList: [],
    };
  },
  mounted() {
    axios({
      method: "get",
      url: "http://localhost:8080/api/getDB",
    }).then((res) => {
      console.log(res.data);
      let ary = res.data;
      this.channel = ary.channel;
      this.brandList = ary.brandList;
      this.newGoodsList = ary.newGoodsList;
      this.hotGoodsList = ary.hotGoodsList;
      this.topicList = ary.topicList;
      this.categoryList = ary.categoryList;
    });

    axios({
      method: "get",
      url: "  http://192.168.33.238:8080/api/getDB",
    }).then((res) => {
      console.log(res.data);
      let ary = res.data;
      this.channel = ary.channel;
      this.brandList = ary.brandList;
      this.newGoodsList = ary.newGoodsList;
      this.hotGoodsList = ary.hotGoodsList;
      this.topicList = ary.topicList;
      this.categoryList = ary.categoryList;
    });
  },
};
</script>

<style scoped>
.serach {
  width: 100%;

  height: 0.266667rem;
  background: red;
}

</style>